<!DOCTYPE html>
<html>
  <style>
    .highlight { background-color: #eee; }
  </style>
  <head>
    <title>Device Motion/Orientation diagnostic measurements</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">
          <hr>
        </td>
      </tr>
      <tr class='highlight'>
        <td>'devicemotion' status</td>
        <td width="250px" id="motionSupported"></td>
      </tr>
      <tr>
        <td>relevant sensors available:</td>
        <td id="motionSensorsAvailable"></td>
      </tr>
      <tr>
        <td>motion acceleration (x, y, z)</td>
        <td id="motionAccel"></td>
      </tr>
      <tr>
        <td>motion acceleration incl. gravity (x, y, z)</td>
        <td id="motionAccelG"></td>
      </tr>
      <tr>
        <td>motion rotation rate (&alpha;, &beta;, &gamma;)</td>
        <td id="motionRotation"></td>
      </tr>
      <tr>
        <td>real-time motion frequency (Hz)</td>
        <td id="motionFreq"></td>
      </tr>
      <tr>
        <td>motion max frequency (Hz)</td>
        <td id="motionMaxFreq"></td>
      </tr>
      <tr>
        <td>motion stated interval</td>
        <td id="motionInterval"></td>
      </tr>
      <tr>
        <td colspan="2">
          <hr>
        </td>
      </tr>
      <tr class='highlight'>
        <td>'deviceorientation' status</td>
        <td id="orientationSupported"></td>
      </tr>
      <tr>
        <td>relevant sensors available:</td>
        <td id="orientationSensorsAvailable"></td>
      </tr>
      <tr>
        <td>orientation values (&alpha;, &beta;, &gamma;)</td>
        <td id="orientationValues"></td>
      </tr>
      <tr>
        <td>orientation absolute</td>
        <td id="orientationAbsolute"></td>
      </tr>
      <tr>
        <td>orientation frequency (Hz)</td>
        <td id="orientationFreq"></td>
      </tr>
      <tr>
        <td>orientation max frequency (Hz)</td>
        <td id="orientationMaxFreq"></td>
      </tr>
      <tr>
        <td colspan="2">
          <hr>
        </td>
      </tr>
      <tr class='highlight'>
        <td>'deviceorientationabsolute' status</td>
        <td id="orientationAbsoluteSupported"></td>
      </tr>
      <tr>
        <td>relevant sensors available:</td>
        <td id="orientationAbsoluteSensorsAvailable"></td>
      </tr>
      <tr>
        <td>orientationabsolute values (&alpha;, &beta;, &gamma;)</td>
        <td id="orientationAbsoluteValues"></td>
      </tr>
      <tr>
        <td>orientationabsolute absolute</td>
        <td id="orientationAbsoluteAbsolute"></td>
      </tr>
      <tr>
        <td>orientationabsolute frequency (Hz)</td>
        <td id="orientationAbsoluteFreq"></td>
      </tr>
      <tr>
        <td>orientationabsolute max frequency (Hz)</td>
        <td id="orientationAbsoluteMaxFreq"></td>
      </tr>
    </table>

    <script type="text/javascript">
      var numberMotionEvents = 0;
      var numberOrientationEvents = 0;
      var numberOrientationAbsoluteEvents = 0;
      var motionMaxFreq = 0;
      var orientationMaxFreq = 0;
      var orientationAbsoluteMaxFreq = 0;
      var updateIntervalDelaySec = 2;

      function onMotion(event) {
        if (event.acceleration.x==null && event.acceleration.y==null && event.acceleration.z==null
           && event.accelerationIncludingGravity.x==null && event.accelerationIncludingGravity.y==null && event.accelerationIncludingGravity.z==null
           && event.rotationRate.alpha==null && event.rotationRate.beta==null && event.rotationRate.gamma==null) {
          // null-event
          document.getElementById("motionSensorsAvailable").innerHTML = "no";
          return;
        }

        document.getElementById('motionAccel').innerHTML =
            roundToFixedArray([event.acceleration.x,
                               event.acceleration.y,
                               event.acceleration.z]);

        document.getElementById("motionAccelG").innerHTML =
            roundToFixedArray([event.accelerationIncludingGravity.x,
                               event.accelerationIncludingGravity.y,
                               event.accelerationIncludingGravity.z]);

        document.getElementById("motionRotation").innerHTML =
            roundToFixedArray([event.rotationRate.alpha,
                               event.rotationRate.beta,
                               event.rotationRate.gamma]);

        document.getElementById("motionInterval").innerHTML = event.interval;
        document.getElementById("motionSensorsAvailable").innerHTML = "yes";
        ++numberMotionEvents;
      }

      function roundToFixed(value) {
        return value==null ? value : value.toFixed(4);
      }

      function roundToFixedArray(values) {
        return '[' + values.map(function(value) {
            return roundToFixed(value);
        }).join(',') + ']';
      }

      function onOrientation(event) {
        if (event.alpha==null && event.beta==null && event.gamma==null) {
          // null-event
          document.getElementById("orientationSensorsAvailable").innerHTML = "no";
          return;
        }
        document.getElementById("orientationValues").innerHTML =
            roundToFixedArray([event.alpha, event.beta, event.gamma]);
        document.getElementById("orientationAbsolute").innerHTML = event.absolute;
        document.getElementById("orientationSensorsAvailable").innerHTML = "yes";
        ++numberOrientationEvents;
      }

      function onOrientationAbsolute(event) {
        if (event.alpha==null && event.beta==null && event.gamma==null) {
          // null-event
          document.getElementById("orientationAbsoluteSensorsAvailable").innerHTML = "no";
          return;
        }
        document.getElementById("orientationAbsoluteValues").innerHTML =
            roundToFixedArray([event.alpha, event.beta, event.gamma]);
        document.getElementById("orientationAbsoluteAbsolute").innerHTML = event.absolute;
        document.getElementById("orientationAbsoluteSensorsAvailable").innerHTML = "yes";
        ++numberOrientationAbsoluteEvents;
      }

      function updateMeasurements() {
        var motionFreq = numberMotionEvents/updateIntervalDelaySec;
        var orientationFreq = numberOrientationEvents/updateIntervalDelaySec;
        var orientationAbsoluteFreq = numberOrientationAbsoluteEvents/updateIntervalDelaySec;
        motionMaxFreq = Math.max(motionMaxFreq, motionFreq);
        orientationMaxFreq = Math.max(orientationMaxFreq, orientationFreq);
        orientationAbsoluteMaxFreq = Math.max(orientationAbsoluteMaxFreq, orientationAbsoluteFreq);

        document.getElementById("motionFreq").innerHTML = motionFreq;
        document.getElementById("motionMaxFreq").innerHTML = motionMaxFreq;
        document.getElementById("orientationFreq").innerHTML = orientationFreq;
        document.getElementById("orientationMaxFreq").innerHTML = orientationMaxFreq;
        document.getElementById("orientationAbsoluteFreq").innerHTML = orientationAbsoluteFreq;
        document.getElementById("orientationAbsoluteMaxFreq").innerHTML = orientationAbsoluteMaxFreq;

        numberMotionEvents = 0;
        numberOrientationEvents = 0;
        numberOrientationAbsoluteEvents = 0;
      }

      var motionSupported="not supported";
      var orientationSupported="not supported";
      var orientationAbsoluteSupported="no supported";

      if ('ondevicemotion' in window) {
        window.addEventListener('devicemotion', onMotion)
        motionSupported="supported";
      }
      document.getElementById("motionSupported").innerHTML = motionSupported;

      if ('ondeviceorientation' in window) {
        window.addEventListener('deviceorientation', onOrientation);
        orientationSupported = "supported";
      }
      document.getElementById("orientationSupported").innerHTML = orientationSupported;

      if ('ondeviceorientationabsolute' in window) {
        window.addEventListener('deviceorientationabsolute', onOrientationAbsolute);
        orientationAbsoluteSupported = "supported";
      }
      document.getElementById("orientationAbsoluteSupported").innerHTML = orientationAbsoluteSupported;

      setInterval(function(){updateMeasurements()}, updateIntervalDelaySec*1000);
    </script>

  </body>
</html>
